HTML table advanced features and accessibility
Adding a caption to your table with <caption>
将<caption>
嵌套到<table>
里。
<table>
<caption>
Dinosaurs in the Jurassic period
</caption>
...
</table>
caption是显示的,对所有人有效,不只是残疾人。
备注
Note:还有一个summary
属性可以在<table>
里使用来对表格进行描述,但是已经过时了,会被阅读但是不能显示,推荐使用<caption>
代替。
Adding structure with <thead>
,<tfoot>
,and<tbody>
细分语义。
关于tbody
即使你不使用,当你用开发者工具打开时会看到浏览器自动给你加上了。
<table>
<caption>
How I chose to spend my money
</caption>
<thead>
<tr>
<th>Purchase</th>
<th>Location</th>
<th>Date</th>
<th>Evaluation</th>
<th>Cost (€)</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">SUM</td>
<td>118</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Haircut</td>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
<tr>
<td>Lasagna</td>
<td>Restaurant</td>
<td>12/09</td>
<td>Regrets</td>
<td>18</td>
</tr>
<tr>
<td>Shoes</td>
<td>Shoeshop</td>
<td>13/09</td>
<td>Big regrets</td>
<td>65</td>
</tr>
<tr>
<td>Toothpaste</td>
<td>Supermarket</td>
<td>13/09</td>
<td>Good</td>
<td>5</td>
</tr>
</tbody>
</table>
Nesting Tables
可以嵌套,但是不推荐。
<table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>
title1 | title2 | title3 | |||
---|---|---|---|---|---|
| cell2 | cell3 | |||
cell4 | cell5 | cell6 |
嵌套出来就长这样。
Tables for visually impaired users
有时候你可以一下找到重点,但是视觉障碍的人不行。
Using column and row headers第13已经讲过了
The scope attribute
scope
属性用来告诉屏幕阅读器这个表题是一行的还是一列的。
例如每一列:
<thead>
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>
或者每一行:
<tr>
<th scope="row">Haircut</th>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
屏幕阅读器会认识这个结构,会让用户读一整行或者是一整列。
scope
还有两个可选的值: colgroup
和 rowgroup
。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的“2016 年 8 月出售的物品”表格,你会看到“衣物”单元格在“长裤”、“衬衫”和“裙子”单元格的上面。这几个单元格都应该被标记为表头(<th>
),但是“衣物”是一个位于顶部且定义了其他三个子标题的表头。因此“衣物”应该有一个 scope="colgroup"
属性,而另外三个子标题应该有 scope="col"
属性。
The id
and headers
attributes
如果要替代 scope
属性,可以使用 id
和 headers
属性来创建标题与单元格之间的联系。使 用方法如下:
- 为每个
<th>
元素添加一个唯一的id
。 - 为每个
<td>
元素添加一个headers
属性。每个单元格的headers
属性需要包含它从属于的所有标题的 id,之间用空格分隔开。
这会给你的 HTML 表格中每个单元格的位置一个明确的定义。像一个电子表格一样,通过 headers 属性来定义属于哪些行或列。为了让它工作良好,表格同时需要列和行标题。
<thead>
<tr>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
<th id="cost">Cost (€)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="haircut">Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
…
</tbody>